<template>
  <a-card style="width: 100%">
    <!-- 搜索 -->
    <a-form name="customized_form_controls" layout="inline" :model="values" @finish="onFinish"
      style="margin: 30px 0; background: #fff" expandFixed="true">
      <a-form-item name="title" label="称呼">
        <a-input v-model:value="values.title" placeholder="请输入账号" />
      </a-form-item>
      <a-form-item name="emile" label="邮箱">
        <a-input v-model:value="values.emile" placeholder="请输入邮箱" />
      </a-form-item>
      <a-form-item name="creas" label="状态">
        <a-select v-model:value="values.creas" style="width: 120px">
          <a-select-option v-for="(item, ind) in zt" :key="ind" :value="item.value">{{ item.label }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item expandFixed="right">
        <a-button type="primary" html-type="submit">搜索</a-button>
        <a-button @click="() => toset()">重置</a-button>
      </a-form-item>
    </a-form>
  </a-card>
  <br />
  <a-card style="width: 100%">
    <a-card v-if="state.selectedRowKeys.length != 0">
      <a-space>
        <a-button @click="() => yesall('1')">通过</a-button>
        <a-button @click="() => yesall('0')">拒绝</a-button>
        <a-button @click="() => removeall()">删除</a-button>
      </a-space>
    </a-card>
    <a-table :dataSource="commentList" :columns="columns" style="width: 100%; height: 100%" :scroll="{ x: 1300 }"
      :pagination="pagination" :row-selection="{ onChange: onSelectChange }" @change="handleTableChange" :total="total">
      <template #bodyCell="{ column, record }">
        <!-- 设置 -->
        <template v-if="column.key === 'address'">
          <div class="edits">
            <a-button @click="() => btnpass(record, '1')">通过</a-button>
            <a-button @click="() => btnpass(record, '0')">拒绝</a-button>
            <a-button @click="() => showModal(record)">回复</a-button>
            <a-popconfirm title="你确定要删除它吗" ok-text="是" cancel-text="否" @confirm="() => confirm(record)">
              <a-button>删除</a-button>
            </a-popconfirm>
          </div>
        </template>
        <!-- 状态 -->
        <template v-if="column.key === 'pass'">
          <a-badge :status="record.pass * 1 ? 'success' : 'warning'" />
          {{ record.pass * 1 ? "通过" : "待审核" }}
        </template>


        <!-- 查看内容 -->
        <template v-if="column.key === 'content'">
          <a-popover placement="top">
            <template #content>
              <p>{{ record.content }}</p>
            </template>
            <template #title>
              <span>评论详情-原始内容</span>
            </template>
            <span style="color: #09f;cursor: pointer;">查看内容</span>
          </a-popover>
        </template>


        <!-- html内容 -->
        <template v-if="column.key === 'html'">
          <a-popover placement="top">
            <template #content>
              <p v-html="record.html"></p>
            </template>
            <template #title>
              <span>评论详情-原始内容</span>
            </template>
            <span style="color: #09f;cursor: pointer;">查看内容</span>
          </a-popover>
        </template>


        <!-- 管理文章 -->
        <template v-if="column.key === 'url'">
          <a-popover placement="top">
            <template #content>
              <iframe :src="'https://creationapi.shbwyz.com' + record.url"></iframe>
            </template>
            <template #title>
              <span>文章预览</span>
            </template>
            <span style="color: #09f;cursor: pointer;">文章</span>
          </a-popover>
        </template>
      </template>
    </a-table>
    <a-modal v-model:visible="visible" title="请输入评论内容" @ok="handleOk" okText="确认" cancelText="取消">
      <textarea v-model="valueshf" style="width: 100%;height: 160px;outline: none;"></textarea>
    </a-modal>
  </a-card>
</template>




<script setup lang="ts">
import { reactive, computed, ref } from "vue"
//引入 pinia 
import { storeToRefs } from "pinia";
import { useComment } from "../../store/comment"
//初始化 pinia 
let comments = useComment();
let { commentList, total } = storeToRefs(comments)
//初始化重置搜索记录缓存
localStorage.removeItem("searchobj")
//定义一个模糊搜索的开关
let flag = false;
//初始化页面数据
comments.getCommentList({ page: 1, pageSize: 12 })
//定义搜索框的初始数据
const values = reactive({
  title: "",
  emile: "",
  role: "",
  creas: "",
});
//回复框初始值
let valueshf = ref("");
let hfobj = reactive({});
//重置
const toset = () => {
  location.reload()
}
//状态
let zt = [
  { label: "通过", value: "1" },
  { label: "待审核", value: "0" },
];

//点击搜索获取表单数据
const onFinish = () => {
  //点击模糊搜索
  console.log(values, "values")
  flag = true;
  searchs(flag)

}

// 定义一个模糊搜索的公共方法
let searchs = (flag: boolean) => {
  let obj = JSON.parse(localStorage.getItem('searchobj') || '{}');
  if (flag) {
    //点击搜索，重置分页
    current.value = 1
    pageSize.value = 12
    obj = {
      page: 1,
      pageSize: 12
    }
  } else {
    //如果点击的是分页 且输入框的值发生了意外的改变 但是没有点击搜索 忽略掉输入框值得改变
    obj = {
      ...obj,
      page: current.value,
      pageSize: pageSize.value
    }
    return comments.getCommentList(obj)
  }
  if (values.title !== "") {
    obj = { ...obj, name: values.title }
  }
  if (values.emile !== "") {
    obj = { ...obj, email: values.emile }
  }
  if (values.creas !== "") {
    obj = { ...obj, pass: values.creas }
  }
  //记录模糊搜索的数据并加入缓存
  localStorage.setItem("searchobj", JSON.stringify(obj))
  //执行搜索请求数据
  comments.getCommentList(obj)
  searchs(flag)
}


//定义分页数据
let current = ref(1), pageSize = ref(12);
//分页
const pagination = computed(() => ({
  total: total.value,
  current: current.value,
  pageSize: pageSize.value,
}));

//多选

type Key = string | number;
const state = reactive<{
  selectedRowKeys: Key[];
  loading: boolean;
}>({
  selectedRowKeys: [], // Check here to configure the default column
  loading: false,
});

const onSelectChange = (selectedRowKeys: Key[]) => {
  state.selectedRowKeys = selectedRowKeys;
};

// 表格分页change事件
const handleTableChange = (val: any) => {
  flag = false
  current.value = val.current
  pageSize.value = val.pageSize
  //点击分页 切换分页 请求数据
  searchs(flag)
}
//点击切换状态
const btnpass = (val: any, v: string) => {
  val.pass = v
  comments.editcomment(val)
}

//多选通过 或 未审核
const yesall = (val: any) => {
  [...state.selectedRowKeys].map((v: any) => {
    let arr = [...commentList.value][v]
    btnpass(arr, val)
  })
}
//点击删除单个
const confirm = (val: any) => {
  comments.removecomment(val.id)
};
//删除多个
const removeall = () => {
  [...state.selectedRowKeys].map((v: any) => {
    let arr = [...commentList.value][v]
    confirm(arr)
  })
}
//表格数据格式
const columns = [
  {
    title: "状态",
    dataIndex: "pass",
    key: "pass",
    width: 100,
    fixed: "left",
  },
  {
    title: "称呼",
    dataIndex: "name",
    key: "name",
    width: 100,
  },
  {
    title: "联系方式",
    dataIndex: "email",
    key: "email",
    width: 100,
  },
  {
    title: "原始内容",
    dataIndex: "content",
    key: "content",
    width: 100,
  },
  {
    title: "HTML内容",
    dataIndex: "html",
    key: "html",
    width: 100,
  },
  {
    title: "管理文章",
    dataIndex: "url",
    key: "url",
    width: 100,
  },
  {
    title: "创建时间",
    dataIndex: "createAt",
    key: "createAt",
    width: 130,
  },
  {
    title: "父级评论",
    dataIndex: "prevntext",
    key: "prevntext",
    width: 100,
  },
  {
    title: "编辑",
    dataIndex: "address",
    key: "address",
    width: 220,
    fixed: "right",
  },
];


//回复消息框
const visible = ref<boolean>(false);

const showModal = (val:any) => {
  console.log(val,"val")
  hfobj = {}
  hfobj = {
    email:val.email,
    hostId:val.hostId,
    name:JSON.parse(localStorage.getItem("users")||'{}').name,
    parentCommentId:val.id,
    replyUserEmail:val.email,
    replyUserName:val.name,
    url:val.url
  }
  visible.value = true;
};

const handleOk = (e: MouseEvent) => {
  let obj = {} ;
  obj = {
    ...hfobj,
    content:valueshf.value,
    createByAdmin:true,
  }
comments.addplList(obj)
  if(valueshf.value.length>0){
      visible.value = false;
  }

};
</script>

<style></style>